<template>
    <div class="container-box">
        <div class="color-item" 
            v-for="item in colorList" 
            :style="{'background': item}" :key="item">
        </div>
        <!-- <p>
            {{props.message}} --- {{props.info}}
        </p>
        <div>
            <el-button type="primary" @click="emitEvent">向父组件发送消息</el-button>
        </div>
        <div>{{ msg }}</div>
        <div>{{ textMsg }}</div>
        <div>
            <el-button type="primary" @click="changeMsgFn">向父组件发送消息</el-button>
        </div> -->
    </div>    
</template>
<script setup lang="ts">
  import colorList from '@/utils/defineColor'
  import {defineEmits, inject} from 'vue'
  console.log('colorList', colorList.length)

  const emit = defineEmits(['childEvent'])
  const props = defineProps({
    message: String,
    info: Object
  })
  console.log('emit', emit)
  const emitEvent = ()=>{
    emit('childEvent', '这是传递给父组件的信息')
  }

  let msg = inject('msg')
  let {textMsg, changeMsgFn} = inject('provideInfo')

</script>
<style lang="scss" scoped>
    .container-box{
        width: 100%;
        height: 100%;
        background: #fff;    
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        &>div.color-item{
            width: 100px;
            height: 40px;
            border-radius: 4px;  
            margin: 8px;          
        }
    }
</style>